<template>
  <div id="product-site">
    <div class="header">
      <img src="../../assets/product/site/banner-con.png">
    </div>
    <div class="one section clearfix">
      <div class="title animate-left"></div>
      <div class="main animate-right"></div>
    </div>
    <div class="two section clearfix">
      <div class="title"></div>
      <div class="main animate-bottom">
      </div>
    </div>
    <div class="three section clearfix">
      <div class="title"></div>
      <div class="main animate-left">
      </div>
    </div>
    <div class="ad"></div>
    <div class="four section clearfix">
      <div class="title"></div>
      <div class="main animate-top">
      </div>
    </div>
  </div>
</template>
<script>
  import ScrollReveal from  'scrollreveal'
  export default{
    data () {
      return {}
    },
    created () {
      this.$nextTick(function () {
        window.sr = ScrollReveal()
        sr.reveal('.animate-left', { origin: 'left', distance: '200px', duration: 3000 })
        sr.reveal('.animate-bottom', { origin: 'bottom', distance: '200px', duration: 3000 })
        sr.reveal('.animate-top', { origin: 'top', distance: '200px', duration: 3000 });
        sr.reveal('.animate-right', { origin: 'right', distance: '200px', duration: 3000 });
        sr.reveal('.animate-3d', { origin: 'right', distance: '200px', duration: 1000, rotate: { x: 100, y: 200, z: 300 } });
      })
    },
    methods: {},
    components: {
    }
  }
</script>
<style scoped>
  #product-site{overflow: hidden}
  .section{padding: 60px 0; width: 100%;}
  .title{background-position: center center; background-repeat: no-repeat; height: 95px;}
  .header{background: url("../../assets/product/site/banner-bg.jpg") no-repeat center top; background-size: cover; background-attachment: fixed}
  .header img{ display: block; margin: 0 auto}
  .main{margin: 0 auto;  margin-top: 60px;background-position: center center; background-repeat: no-repeat;}
  .one{background-color: #fff;}
  .one .title{background-image: url("../../assets/product/site/title1.png")}
  .one .main{background-image: url("../../assets/product/site/content1.png"); height: 272px}
  .two{background-color: #f8f8f8;}
  .two .title{background-image: url("../../assets/product/site/title2.png")}
  .two .main{background-image: url("../../assets/product/site/content2.png"); height: 1347px}
  .three{background-color: #fff;}
  .three .title{background-image: url("../../assets/product/site/title3.png")}
  .three .main{background-image: url("../../assets/product/site/content3.png"); height: 360px}
  .four{background-color: #fff;}
  .four .title{background-image: url("../../assets/product/site/title4.png")}
  .four .main{background-image: url("../../assets/product/site/content4.png"); height: 500px;}
  .ad{background: url("../../assets/product/site/guanggao.png") no-repeat center center; height: 600px;}
</style>
